<template>
  <view>
    <view class="temp-box">
      <view class="item">
        <view class="tab">
          <text
            :class="['tab-item', {active: current == i}]"
            v-for="(e,i) in sitedata.survey"
            :key="i"
          >{{e.name}}</text>
        </view>
        <view class="temp-content">
          <swiper :current="current">
            <swiper-item v-for="(item,index) in sitedata.survey" :key="index">
              <view class="content_item">
                <shi-ming-zhi :smzData="item.data"></shi-ming-zhi>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>
    <!-- <shi-ming-zhi></shi-ming-zhi> -->
    <!-- <yang-chen></yang-chen> -->
  </view>
</template>

<script>
import shiMingZhi from "./shimingzhi";
import yangChen from "./yangchen";
export default {
  components: {
    shiMingZhi,
    yangChen
  },
  props: {
    sitedata: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      current: 0
    };
  },
  methods: {},
  mounted() {
    console.log(this.sitedata);
  }
};
</script>

<style lang="scss" scoped>
.temp-box {
  .temp-content {
    swiper {
      height: 380rpx;
    }
    .content_item {
      padding:10rpx;
      box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);
      width: 100%;
      height: 100%;
    }
  }
  .item {
    .tab {
      padding: 22rpx 0;
      position: relative;
      display: flex;
      align-items: center;
      .tab-item {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #909090;
        font-size: 24rpx;
        position: relative;
        &.active {
          color: #0084ff;
        }
      }
      .tab-item + .tab-item {
        padding-left: 22rpx;
      }
    }
  }
}
</style>